<script>
import { getBanners, getAllProType } from "../../api/otherServer";
import { mapGetters, mapActions, mapMutations } from "vuex";
import { getPro } from "../../api/productserver";
import { statcUrl } from "../../api/api";
import Product from "../../components/product.vue";
import "../../style/font_icon/iconfont.css";
export default {
  components: {
    product: Product, //子组件传进来
  },
  data() {
    return {
      //用到的数据
      proData: { hot: [], new: [] },
      isType: "hot",
      statcUrl,
    };
  },
  computed: {
    ...mapGetters("global", ["getBanner"]),
    ...mapGetters("global", ["getTypeData", "recommedType"]),
    showData() {
      return this.proData[this.isType];
    },
  },
  mounted() {
    //vue组件请求后端数据没有特殊需求都是在第一次渲染完成后发送，因为请求的数据可能是要挂载dom如果dom没有渲染完成,操作会报错
    this.inc();
    this.getHot();
  },
  methods: {
    ...mapActions("global", ["setBannerActions", "setTypeActions"]),
    inc() {
      if (this.getBanner.length == 0) {
        getBanners((res) => {
          this.setBannerActions({
            data: res.data[0],
          });
        });
      }
      if (this.recommedType.length == 0) {
        getAllProType((res) => {
          this.setTypeActions({
            data: res.data[0].data,
          });
        });
      }
    },
    getNew() {
      if (this.proData.new.length > 0) {
        this.isType = "new";
      } else {
        getPro({ page: 1, orderbytype: "id" }, (res) => {
          console.log(res);
          this.proData.new = res.data[0].data;
          this.isType = "new";
        });
      }
    },

    getHot() {
      if (this.proData.hot.length > 0) {
        this.isType = "hot";
      } else {
        getPro({ page: 1, orderbytype: "sales" }, (res) => {
          console.log(res);
          this.proData.hot = res.data[0].data;
          this.isType = "hot";
        });
      }
    },
  },
};
</script>
<template>
  <van-search
    v-model="value"
    placeholder="请输入搜索关键词"
    shape="round"
    class="home-search"
    :to="'/list'"
  />
  <van-swipe class="home-swipe" :autoplay="3000" lazy-render>
    <van-swipe-item v-for="item in getBanner" :key="item.id">
      <img :src="statcUrl + '/' + item.img" />
    </van-swipe-item>
  </van-swipe>
  <div class="home_type">
    <router-link to="#">
      <img src="../../assets/1_03.png" alt="" />
      <p>购物车</p>
    </router-link>
    <router-link to="#">
      <img src="../../assets/1_06.png" alt="" />
      <p>优惠卷</p> </router-link
    ><router-link to="#">
      <img src="../../assets//1_09.png" alt="" />
      <p>我的订单</p> </router-link
    ><router-link to="#">
      <img src="../../assets/1_11.png" alt="" />
      <p>我的收藏</p>
    </router-link>
  </div>
  <div class="home_hotttype">
    <router-link
      :to="'/list/' + item.id"
      v-for="item in recommedType"
      :key="item.id"
    >
      <h3>{{ item.title }}</h3>
      <p>{{ item.subtitle }}</p>
      <img :src="statcUrl + '/' + item.img" />
    </router-link>
  </div>
  <div class="home-pro">
    <h3 class="title">
      <span
        class="iconfont icon-left-circle"
        @click="getHot"
        v-show="isType == 'new'"
      ></span>
      {{ isType == "new" ? "最新上架" : "超值热卖" }}
      <span
        class="iconfont icon-roundright"
        @click="getNew"
        v-show="isType == 'hot'"
      ></span>
      <!-- <span class="icon-roundright"></span> -->
      <div class="tag">{{ isType == "hot" ? 1 : 2 }}/2</div>

      <product :dataList="showData" />
    </h3>
  </div>
</template>
<style src="./index.scss"></style>
